<template>
    <div class="">首页</div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue';
import useStoreIndex from '../store/modules/index';
import { storeToRefs } from "pinia";
import { fRequest } from '../api/request.js'

import SubWrap from './wrap.vue';


/**
 * 变量
 */
let oStore = useStoreIndex();//
let { userInfo, isCollapse } = storeToRefs(oStore);
let oUserInfo = ref(null);
let aMenuList = ref(null);
/**
* 方法
*/

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
// 请求集合
const fFnSet = () => {
    // fRequestUserInfo();// 请求用户信息
    // fRequestMenuTree();// 请求左侧菜单
};

// 请求用户信息
async function fRequestUserInfo() {
    let res = await fRequest({
        url: '/api/getUserInfo',
        method: 'get',
    })
    // console.log(res)
    oUserInfo.value = { ...res.data };
    oStore.fSetUserInfo({ ...res.data });
    // console.log(oUserInfo.value)
};
// 请求左侧菜单
async function fRequestMenuTree() {
    let res = await fRequest({
        url: '/api/getMenuTree',
        method: 'get',
    })
    oStore.fSetMuenList(res.data.menulist);
    aMenuList.value = res.data.menulist;
    console.log(aMenuList.value, 'aMenuList.value')
    // console.log(res.data.menulist,'请求左侧菜单')
}
onMounted(() => {
    fFnSet();// 请求集合
})

</script>

<style scoped lang="less">
.app-wrapper {
    position: relative;
    // height: 100;
}

.icon {
    width: 40px;
    height: 40px;
}

.layout-aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 210px;
    transition: all 0.3s;
    background-color: #304156;

    .layout-logo {
        height: 60px;
        background-color: #2b2f3a;

        a {
            display: flex;
            width: 100%;
            height: 60px;
            justify-content: center;
            align-items: center;
        }

        img {
            width: 32px;
            height: 32px;
        }

        span {
            font-size: 14px;
            line-height: 60px;
            color: #fff;
            margin-left: 12px;
        }
    }
}

.layout-aside.collapse {
    width: 64px;
}

.layout-container {
    margin-left: 210px;
    height: 100%;
    overflow: hidden;
}

.layout-container.collapse {
    margin-left: 64px;
    transition: all 0.1s;
}

.layout-header {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    width: calc(100% - 210px);
    height: 60px;
    box-shadow: 0 1px 3px rgba(0, 21, 41, 0.08);
    background-color: #fff;
}

.layout-header.collapse {
    width: calc(100% - 64px);
    transition: all 0.1s;
}

.layout-main {
    min-height: calc(100vh - 100px);
    margin: 70px 15px 10px 10px;
    background-color: #fff;
}
</style>